<template>
  <div>
    <title-bar
      :titleText="$route.meta.title"
      :needBack="false"
    >
      <!-- 返回按钮 -->
      <slot name="left">
        <i
          class="icon iconfont icon-back back-btn"
          @click="back()"
        ></i>
      </slot>
      <slot>
        <!-- 标题 -->
        <span class="title-text">忘记密码</span>
      </slot>
    </title-bar>
    <!-- 输入区域 -->
    <div class="input-warpper">
      <!-- 手机号输入组件 -->
      <username-input
        ref="myUsername"
        :username="username"
      ></username-input>
      <!-- 验证码输入组件 -->
      <sms-code-input
        ref="mySmsCode"
        :smsCode="smsCode"
        :smscodeType="smscodeType"
      ></sms-code-input>
      <!-- 密码输入组件 -->
      <password-input
        ref="myPassword"
        :password="password"
        :isShowPwdIcon="isShowPwdIcon"
        :isPlaceholdertLength="isPlaceholdertLength"
      ></password-input>
      <!-- 确定按钮 -->
      <button
        class="baseBgColorNoActive fontsize28 confirm-btn"
        @click="updatePassword()"
      >确定</button>
    </div>
    <img
      v-if="isShowBottomImg"
      class="bottom-img"
      src="./../assets/login-bottom.png"
    />
  </div>
</template>

<script>
import UsernameInput from '../components/UsernameInput'
import SmsCodeInput from '../components/SmsCodeInput'
import PasswordInput from '../components/PasswordInput'
import { TitleBar } from 'vue-xb-ui-depot'
import md5 from 'js-md5'
import { updatePassword } from '../api/api'
import { validatePromiseAll } from '../utils/validateForm'
export default {
  components: {
    usernameInput: UsernameInput,
    smsCodeInput: SmsCodeInput,
    passwordInput: PasswordInput,
    TitleBar
  },
  data() {
    return {
      username: '', // 手机号
      smsCode: '', // 短信验证码
      smscodeType: 3, // 发送验证码类型：1:通用验证码，2:注册验证码，3:忘记密码验证码，4:第三方登录验证码绑定手机号（微信）
      isShowPwdIcon: false, // 密码眼睛图标是否展示
      isPlaceholdertLength: true, // 密码placeholder是否有长度提示
      password: '', // 密码
      isShowBottomImg: window.isShowBottomImg// 是否展示底部图片
    }
  },
  mounted() {

  },
  updated() {
    if (this.$refs.mySmsCode.countDownTimer) {
      clearInterval(this.$refs.mySmsCode.countDownTimer)
    }
  },
  methods: {
    back() { // 返回
      // 离开清除计时器
      if (this.$refs.mySmsCode.countDownTimer) {
        clearInterval(this.$refs.mySmsCode.countDownTimer)
      }
      this.$router.back(-1)
    },
    updatePassword() { // 忘记密码
      let username = this.$refs.myUsername.username
      let smsCode = this.$refs.mySmsCode.smsCode
      let password = this.$refs.myPassword.password

      validatePromiseAll({
        checkArray: [{
          type: 'username',
          value: username
        }, {
          type: 'smscode',
          value: smsCode
        }, {
          type: 'password',
          value: password
        }],
        successCallback: (dataArray) => {
          updatePassword(
            username,
            smsCode,
            md5(password)
          ).then(res => {
            // 离开清除计时器
            if (this.$refs.mySmsCode.countDownTimer) {
              clearInterval(this.$refs.mySmsCode.countDownTimer)
            }
            this.$toastMsg('密码重置成功，请重新登录')
            this.$router.back(-1)
          })
        },
        errorCallback: (error) => {
          console.log('表单校验失败：' + error)
          this.$toastMsg(error)
        }
      })

      // if (username === '') {
      //   this.$toastMsg('请输入手机号码')
      //   return false
      // } else if (!/^1[3-9]\d{9}$/.test(username)) {
      //   this.$toastMsg('手机号码格式不正确')
      //   return false
      // }
      // if (smsCode === '') {
      //   this.$toastMsg('请填写收到的验证码')
      //   return false
      // }
      // if (password === '') {
      //   this.$toastMsg('请输入密码')
      //   return false
      // } else if (password.length < 6 || password.length > 20) {
      //   this.$toastMsg('请输入密码(6-20)')
      //   return false
      // } else {
      //   password = md5(password)
      // }
      // updatePassword(
      //   username,
      //   smsCode,
      //   password
      // ).then(res => {
      //   // 离开清除计时器
      //   if (this.$refs.mySmsCode.countDownTimer) {
      //     clearInterval(this.$refs.mySmsCode.countDownTimer)
      //   }
      //   this.$toastMsg('密码重置成功，请重新登录')
      //   this.$router.back(-1)
      // })
    }
  }
}
</script>

<style scoped>
.title-text {
  color: #333;
}
/* 输入组件包裹成 */
.input-warpper {
  padding: 60px 30px 0 30px;
}
/* 确定按钮 */
.confirm-btn {
  color: #fff;
  width: 690px;
  height: 80px;
  line-height: 80px;
  margin-top: 100px;
  border-radius: 8px; /*px*/
  border: none;
}
/* 底部图片 */
.bottom-img {
  width: 750px;
  height: 156px;
  position: absolute;
  bottom: 0;
  left: 0;
}
</style>
